<template>
  <page class="op">
    <div class="sulian clearfix">
      <TitleBar title="员工管理" refresh />
      <div class="fu_quyu clearfix">
        <div class="top">筛选查询</div>
        <!-- 数据 -->
        <div class="he clearfix">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="输入搜索:">
              <el-input v-model="form.name" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="所属部门:">
            <el-select v-model="value" placeholder="请选择部门">
              <el-option
                v-for="item in initList"
                :key="item.id"
                :label="item.departmentName"
                :value="item.departmentName"
              ></el-option>
            </el-select>
          </el-form-item>
            <el-button type="primary" @click="addseekLog">搜索</el-button>
          </el-form>
        </div>
      </div>
      <!-- form -->
      <div class="conten clearfix">
        <div class="top">
          数据列表
        </div>
        <div class="handle">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form>
              <el-button type="primary" @click="append">添加</el-button>
            </el-form>
            <el-form-item>
              <el-form-item>
                <el-select v-model="value_a" placeholder="请选择页码" @change="getPages">
                  <el-option
                    v-for="item in options_a"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-form-item>
            <el-form-item>
              <el-form-item>
                <el-select v-model="value_b" placeholder="请选择排序方式" @change="getVal">
                  <el-option
                    v-for="item in options_b"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          :data="tableData"
          :header-cell-style="{
          'height':'56px',
          'background':'#F2F2F2',
        }"
          style="width: 100%;border:1px solid #E6E6E6;margin-bottom:59px"
        >
          <!-- 标题设置 -->
          <el-table-column label="成员账户" align="center">
            <template slot-scope="scope">
              <span style="display:block;text-align:center;">{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <span style="display:block;text-align:center;">{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="邮箱地址" align="center">
            <template slot-scope="scope">
              <span style="display:block;text-align:center;">{{ scope.row.email }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属部门" align="center">
            <template slot-scope="scope">
              <span style="display:block;text-align:center;">{{ scope.row.departmentName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" align="center">
            <template slot-scope="scope">
              <span style="display:block;text-align:center;">{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="最后登录" align="center">
            <template slot-scope="scope">
              <span style="display:block;text-align:center;">{{ scope.row.logingTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否启用" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                @change="getSwith(scope.row.code,scope.row.status)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <p
                class="quanxian"
                @click="quanxian(scope.$index,scope.row.code,scope.row.departmentName)"
              >权限设置</p>
              <p class="bianji" @click="bianji(scope.$index,scope.row.code)">编辑</p>
              <p class="shangchu" @click="delMessage(scope.$index,scope.row)">删除</p>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
    </div>
    <div class="xiao">
      <pagination :pagination="pagination1" @changepage="getList" />
    </div>
  </page>
</template>

<script>
import { initList, delData,getSwitchB,getSection } from "../../../api/jurisdiction.js";

export default {
  data() {
    return {
      pagination1: {},
      initList:[],
      value:'',
      options_a: [
        {
          value: "5",
          label: "5"
        },
        {
          value: "10",
          label: "10"
        }
      ],
      options_b: [
        {
          value: "asc",
          label: "升序"
        },
        {
          value: "desc",
          label: "降序"
        }
      ],
      value_b: "",
      value_a: '',
      value3: true,
      value4: true,
      form: {
        name: "",
        section: ""
      },
      pageSize: 5,
      prev: "上页",

      tableData: [],
      code: ""
    };
  },
  created() {
    this.getList();
    this.init();
  },
  methods: {
    // 部门初始化
    init(){
      getSection({
        pageNum: 1,
        pageSize: 100
      }).then(res => {
        if (res.code == 200) {
          this.initList = res.data.list;
        }
      });
    },
      // 是否启动
    getSwith(code,val){
      getSwitchB({
        code:code,
        status:val==true? 1:0
      }).then(res=>{
        if(res.code==200){
          this.$message({
            message: '修改成功！',
            type: 'success'
          });
        }else{
           this.$message.error('修改失败！');
        }
      })
    },
    // 名字和部门搜索
    addseekLog(pageNum=1) {
      if (this.form.name != "" || this.value != "") {
        initList({
          pageNum: 1,
          pageSize: this.value_a,
          phone:this.form.name,
          departmentName: this.value
        }).then(res => {
          this.tableData = res.data.list;
          this.pagination1 = res.data;
        });
      } else {
        this.$message({
          message: "一项为必填！",
          type: "warning"
        });
      }
    },
    // 页码选择
    getPages(pageNum=1) {
      initList({
        pageNum,
        pageSize: this.value_a
      }).then(res => {
        this.tableData = res.data.list;
         this.pagination1 = res.data;
      });
    },
    // 升降序
    getVal() {
       initList({
       pageNum: 1,
        pageSize: this.value_a,
        desc: this.value_b
      }).then(res => {
        this.tableData = res.data.list;
        this.pagination1 = res.data;
        for (let i = 0; i < res.data.list.length; i++) {
          if (res.data.list[i].status == 1) {
            res.data.list[i].status = true;
          } else {
            res.data.list[i].status = false;
          }
        }
      });
    },
    // 获取员工信息
    getList(pageNum = 1) {
      initList({
        pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list;
        this.pagination1 = res.data;
        for (let i = 0; i < res.data.list.length; i++) {
          if (res.data.list[i].status == 1) {
            res.data.list[i].status = true;
          } else {
            res.data.list[i].status = false;
          }
        }
      });
    },
    // 删除信息
    delMessage(idx, list) {
      debugger;
      this.$confirm("确认删除员工吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.code = list.code;
        delData([this.code]).then(res => {
          this.getList();
        });
      });
    },
    // 编辑信息
    bianji(idx, code) {
      this.$router.push({
        name: `editingStaff`,
        query: {
          code
        }
      });
    },
    // 权限设置
    quanxian(idx, code, departmentName) {
      this.$router.push({
        name: `progPermission`,
        query: {
          code,
          departmentName
        }
      });
    },
    // 添加
    append() {
      this.$router.replace("addEmployee");
    }
  }
};
</script>

<style lang="scss" scoped>
.op {
  padding-right: 144px;
  .top {
      margin: 0 22px;
      height: 56px;
      line-height: 56px;
      font-size: 14px;
      font-family: PingFangSC;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      letter-spacing: 1px;
      border-bottom: 2px solid #f2f2f2;
    }
  .fu_quyu {
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    .he{
      padding: 32px 0 31px 13px;
      .el-form-item{
        float: left;
        margin-right: 25px;
      }
    }
  }
  .conten{
    .top{
      margin:0;
    }
    padding: 0 22px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    button{
      float: left;
    }
     .el-form-item{
        float: left;
        margin-right: 25px;
      }
      .handle{
        padding: 26px 0 29px 22px;
      }
      p{
        color: #488DFF;
        padding: 0;
        margin: 0;
      }
      .shangchu{
        color: #FF2E2E;
      }
  }
  .xiao {
    height: 100px;
    padding-right: 90px;
  }
}
</style>
